<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--   
        
        前端的模块化 => ES6官方提供

        什么叫模块化?
        1. 将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来(按照需求引入)
        2. 减少小全局变量的使用
        3. 提高代码的复用
    -->
</body>

<!-- 作为普通js文件引入  => 有模块化的语法  => 报错 -->
<!-- <script type="text/javascript" src="../js/md1.js"></script> -->

<!-- <script type="module">
    // import "../js/md1.js";  //直接导入 => 无法使用模块内的变量和方法

    import { a, b, fn } from "../js/md1.js";
    console.log(a, b, fn);
    fn();


</script> -->
<!-- <script type="module">
    import { a, b } from "../js/md2.js";
    console.log(a, b);
</script> -->

<!-- <script type="module">
    // 此变量say 接收模块输出的默认值(变量可以随便该)
    import say, { a, b } from '../js/md3.js';
    // console.log(say);
    // say();

    console.log(aa, b);
</script> -->

<!-- <script type="module" src="../js/md4.js"> </script> -->


<!-- <script type="module" src="../js/jquery-3.6.0.min.js"></script> -->
<script type="module">
    import "../js/jquery-3.6.0.min.js";
    console.log($);
</script>

</html>